import React from 'react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';

interface EmptyProps {
  icon?: React.ReactNode;
  title?: string;
  description?: string;
  action?: React.ReactNode;
  className?: string;
}

export type { EmptyProps };

const EmptyContainer = styled(motion.div)`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-secondary);
  width: 100%;
`;

const EmptyIcon = styled.div`
  font-size: 3.5rem;
  opacity: 0.25;
  margin-bottom: 1.5rem;
  color: var(--text-secondary);

  svg {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }
`;

const EmptyTitle = styled.h3`
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
`;

const EmptyDescription = styled.p`
  margin: 0 0 1.5rem 0;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  opacity: 0.8;
  max-width: 320px;
  line-height: 1.5;
`;

const EmptyAction = styled.div`
  margin-top: 0.5rem;
`;

const Empty: React.FC<EmptyProps> = ({ icon, title = '暂无数据', description, action, className }) => {
  return (
    <EmptyContainer
      className={className}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4 }}
    >
      {icon && <EmptyIcon>{icon}</EmptyIcon>}
      <EmptyTitle>{title}</EmptyTitle>
      {description && <EmptyDescription>{description}</EmptyDescription>}
      {action && <EmptyAction>{action}</EmptyAction>}
    </EmptyContainer>
  );
};

export default Empty;

